<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人加班月汇总审批</title>
    <link rel="stylesheet" href="./index.css" />
    <style>
      #overtimeSummary {
        height: 100%;
        background-color: #f5f5f5;
      }
    </style>
  </head>

  <body>
    <div id="overtimeSummary">
      <van-form @submit="onSubmit" style="margin-bottom: 200px">
        <div>个人加班月汇总审批</div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 0 px; border-radius: 5px"
          >
            <van-cell-group>
              <van-field label="部门" value="信息技术部" readonly />
            </van-cell-group>
          </div>
        </div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 0 px; border-radius: 5px"
          >
            <van-cell-group>
              <van-field label="填报人" value="输入框只读" readonly />
            </van-cell-group>
          </div>
        </div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 0 px; border-radius: 5px"
          >
            <van-field name="stepper" label="年份">
              <template #input>
                <van-stepper
                  v-model="yearDate"
                  min="2015"
                  max="2035"
                  @change="onYearChange"
                />
              </template>
            </van-field>
          </div>
        </div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 0 px; border-radius: 5px"
          >
            <van-field name="stepper" label="月份">
              <template #input>
                <van-stepper
                  v-model="monthDate"
                  min="1"
                  max="12"
                  @change="onMonthChange"
                />
              </template>
            </van-field>
          </div>
        </div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 0 px; border-radius: 5px"
          >
            <van-cell-group>
              <div>
                <van-field label="日期" value="输入框只读" readonly />
              </div>
              <div>
                <van-field label="加班地点" value="输入框只读" readonly />
              </div>
            </van-cell-group>
            <div>
              <van-field
                label="加班时间安排"
                value="输入框只读"
                readonly
              />xxxxxx
            </div>
          </div>
        </div>

        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 10px; border-radius: 5px"
          >
            <div style="font-size: 14px; color: #323233">
              <span style="color: red">*</span>公司分管领导意见
            </div>
            <van-field
              v-model="remark"
              rows="3"
              autosize
              type="textarea"
              placeholder="请输入备注"
              :rules="[{ required: true, message: '请输入备注' }]"
            />
          </div>
        </div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 10px; border-radius: 5px"
          >
            <div style="font-size: 14px; color: #323233">
              <span style="color: red">*</span>公司人事分管领导意见
            </div>
            <van-field
              v-model="remark2"
              rows="3"
              autosize
              type="textarea"
              placeholder="请输入备注"
              :rules="[{ required: true, message: '请输入备注' }]"
            />
          </div>
        </div>
        <!-- <div style="margin: 16px; margin-bottom: 200px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div> -->
      </van-form>
      <div
        style="
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 15px;
          background-color: white;
          box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
          z-index: 1000;
        "
      >
        <van-button
          type="primary"
          block
          @click="onHold"
          style="margin-bottom: 10px"
        >
          暂存</van-button
        >
        <van-button type="danger" block @click="onSubmitApproval ">
          提交审批</van-button
        >
      </div>
    </div>
  </body>
  <script src="./vue.min.js"></script>
  <script src="./vant.min.js"></script>
  <script>
    var overtimeSummary = new Vue({
      el: "#overtimeSummary",
      data() {
        const now = new Date();
        const minDate = new Date(now);
        minDate.setFullYear(now.getFullYear() - 1);
        const maxDate = new Date(now);
        maxDate.setFullYear(now.getFullYear() + 1);
        return {
          remark: "", // 备注
          remark2: "", // 备注2
          yearDate: 2025, // 异常日期 年
          monthDate: 10, // 异常日期 月
        };
      },
      computed: {},
      created() {},
      mounted() {},
      methods: {
        showPopup(value) {
          //  点击打开弹出层
          this.popupType = value;
          this.show = true;
        },
        onSubmit(values) {
          console.log("submit", values);
        },
        onYearChange() {
          console.log(this.yearDate);
        },
        onMonthChange() {
          console.log(this.monthDate);
        },
        checkout() {
          // 判断每个都都有没值
          if (!this.yearDate) {
            this.$toast("请选择年份");
            return false;
          }
          if (!this.monthDate) {
            this.$toast("请选择月份");
            return false;
          }
          if (!this.remark) {
            this.$toast("请填写公司分管领导意见");
            return false;
          }
          if (!this.remark2) {
            this.$toast("请填写公司人事分管领导意见");
            return false;
          }
          return true;
        },
        onHold() {
          // 暂存
          if (!this.checkout()) {
            return;
          }
          console.log("暂存");
          console.log(this.yearDate);
          console.log(this.monthDate);
          console.log(this.remark);
          console.log(this.remark2);
        },
        onSubmitApproval() {
          // 提交审批
          if (!this.checkout()) {
            return;
          }
          console.log("提交审批");
        },
      },
    });
  </script>
</html>
